//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';

//导入好看的消息提示框
import { ElMessage } from 'element-plus';

//导入useTokenStore方法，这个方法调用后会返回一个store对象，存储可复用的代码
import { useTokenStore } from '@/stores/token.js'


//定义一个变量,记录公共的前缀  ,  baseURL ，复用前置路径，
// axios.create方法生成一个新的axios实例instance，并携带上前缀，请求js们翻出请求时，调用这个实例.get.post 等方法，并带上具体的访问路径，发送请求
// const baseURL = 'http://localhost:8080';

//更新：解决跨域问题
const baseURL = '/api';

const instance = axios.create({baseURL})


//添加响应拦截器，优化每次前端受到相应后还要手动判断后端返回的状态码，取出数据等等，拦截器会在响应回来后自动执行
//instance（axios实例）.interceptors.response.use(拦截器中注入成功的回调函数result，失败的回调函数err的复用)，拦截器拦截后已经是异步了
instance.interceptors.response.use(
    result=>{
        //判断后端传回的json数据的状态码
        if(result.data.code == 0){
          return result.data; //这是真正的后端返回的数据的接受点，result.data返回的就是完整的后端传入的json对象
        }
        //否则失败,result.data.message才是json数据中的错误信息而不是result.data.msg
        ElMessage.success(result.data.message?result.data.message:'服务异常');
        return Promise.reject(result.data);//异步的状态转化成失败的状态，只有这样，才能在vue中调用的时候，使用catch方法去捕获异常时后端返回的信息json数据
    },
    err=>{
        //在异常回调中获取HTTP的状态码err.response.status，这个不是后端返回的嗷,而是HTTP的状态码
        if(err.response.status == 401){
            //如果状态码是401，就表示token过期，需要重新登录
            alert(err.response.data.message);
            
            //调用useTokenStore，获取Store对象
            const tokenStore = useTokenStore();
            //清空tokenStore中的token
            tokenStore.removeToken();
            //跳转到登录页面
            window.location.href = '/login';
            return;
        }else{  //bushi401而是其他的状态码
            ElMessage.error(err.response.data.message?err.response.data.message:'服务异常');
        }
        return Promise.reject(err);//异步的状态转化成失败的状态，只有这样，才能在vue中调用的时候，使用catch方法去捕获错误
    }
)

//添加请求拦截器，优化每次js们发出请求时，都需要手动写带上token进入请求头，拦截器会在请求发出前自动执行，自动加上token
//instance（axios实例）.interceptors.request.use(拦截器中注入成功的回调函数config，失败的回调函数err的复用)，拦截器拦截后已经是异步了
instance.interceptors.request.use(
    config=>{         //config是请求时的配置信息
        //调用useTokenStore，获取Store对象
        const tokenStore = useTokenStore();
        //判断tokenStore对象中是否有token
        if(tokenStore.token){
            //如果有token,就把token添加到请求头中
            config.headers.Authorization = tokenStore.token;   //config.headers.Authorization 修改请求头中的Authorization字段
        }
        return config;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态，只有这样，才能在vue中调用的时候，使用catch方法去捕获错误
    }
)


export default instance;  //暴露出去这个axios实例